<template>
	<view class="grey_bg">
		<mescroll-uni  @init="mescrollInit" :height="height + 'px'" :disable-scroll="disableScroll" :down="downOptions" :up="upOptions"  @up="upBack" >

			<view v-if="dataList.length > 0">
				<list-content v-for="(item, index) in dataList" :key="index"  :data="item"
							:showFollow="false"  :disable-to-home="true" @video_play="videoPlayBack">
				</list-content>
			</view>

			<no-data v-else  :height="height" icon="/static/bg/cat_qz.png" :iconMarginTop="100">
			</no-data>

			<!-- 消息提示 -->
			<u-toast ref="uToast"></u-toast>

		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import ListContent from "@/components/article/listContent.vue";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		props: {
			// mescroll的高度
			height: [Number, String],
			// 是否禁止滚动, 默认false
			disableScroll: Boolean,
			// 用户id
			username: String
		},
		//使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		mixins: [MescrollMixin,MescrollMoreItemMixin],
		components:{
			ListContent,
			NoData
		},
		data() {
			return {
				downOptions: {
					use: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: ''
					}
				},
				// 是否已加载过数据
				isLoaded: false,
				// 当前页
				currentPage: 1,
				// 分页大小
				pageSize: 12,
				// 数据
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,
			}
		},
		computed: {
			// 是否为当前用户
			isCurrentUser() {
				return !this.username
			}
		},
		created() {
			this.isLoaded = false
		},
		methods: {
			initData(){
				this.currentPage = 1
				this.pageSize = 12
				this.getArticleList()
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			},
			// 获取列表数据
			getArticleList(){
				if(this.loading){
					return
				}
				let form = {
					page: this.currentPage,
					size: this.pageSize
				}
				let url = this.isCurrentUser?'user/article/index':'open/article/user/'+this.username
				this.loading = true
				this.$httpApi.baseArticleGet(url,form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList =  data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多
			getMoreList(){
				if(this.loading || this.noMore){
					return
				}
				let form = {
					page: this.currentPage + 1,
					size: this.pageSize
				}
				let url = this.isCurrentUser?'user/article/index':'open/article/user/'+this.username
				this.loading = true
				this.$httpApi.baseArticleGet(url,form).then(({ data }) => {
					this.loading = false
					if (data.code == "000000") {
						if(data.data.records && data.data.records.length > 0){
							this.currentPage += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length,!this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			/**
			 * 上拉加载的回调
			 */
			upBack(page) {
				if (!this.loading && !this.noMore) {
					this.getMoreList()
				}else{
					this.mescroll.endErr()
				}
			},

		}
	}
</script>

<style lang="scss" scoped>


</style>
